<div class="container py-5">
    <!-- 导航栏 -->
    <div class="d-flex justify-content-between align-items-center mb-5">
        <a href="{% url 'polls:index' %}" class="btn btn-outline-primary rounded-pill px-4">
            <i class="bi bi-arrow-left me-2"></i>返回首页
        </a>
        <a href="{% url 'polls:results' question.id %}" class="btn btn-gradient rounded-pill px-4">
            <i class="bi bi-graph-up me-2"></i>查看结果
        </a>
    </div>

    <!-- 投票卡片 -->
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
            <div class="vote-card bg-white rounded-4 shadow-sm p-4 p-md-5">
                <form action="{% url 'polls:vote' question.id %}" method="post">
                    {% csrf_token %}
                    
                    <!-- 标题区域 -->
                    <div class="text-center mb-5">
                        <div class="title-icon mb-3">
                            <i class="bi bi-pencil-square"></i>
                        </div>
                        <h2 class="text-gradient mb-3">{{ question.question_text }}</h2>
                        {% if error_message %}
                        <div class="alert alert-danger rounded-pill py-2 px-3 d-inline-block">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <strong>{{ error_message }}</strong>
                        </div>
                        {% endif %}
                    </div>
                    
                    <!-- 选项列表 -->
                    <div class="choices-list mb-4">
                        {% for choice in question.choice_set.all %}
                        <div class="choice-item">
                            <input type="radio" name="choice" id="choice{{ forloop.counter }}" 
                                   value="{{ choice.id }}" class="choice-input">
                            <label for="choice{{ forloop.counter }}" class="choice-label">
                                <span class="choice-text">{{ choice.choice_text }}</span>
                                <span class="choice-check"><i class="bi bi-check-lg"></i></span>
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <!-- 提交按钮 -->
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-lg btn-gradient rounded-pill px-5 py-2">
                            <i class="bi bi-send-fill me-2"></i>提交投票
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    /* 继承主样式 */
    .text-gradient {
        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 700;
    }
    
    .title-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
        border-radius: 50%;
    }
    .title-icon i {
        font-size: 1.75rem;
        color: #3b82f6;
    }
    
    .btn-gradient {
        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        color: white;
    }
    
    /* 投票卡片特定样式 */
    .vote-card {
        border: 1px solid rgba(0, 0, 0, 0.03);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    /* 选项列表样式 */
    .choices-list {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .choice-item {
        margin-bottom: 0.75rem;
    }
    
    .choice-input {
        display: none;
    }
    
    .choice-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        background: #f8fafc;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid #e2e8f0;
    }
    
    .choice-label:hover {
        background: #f1f5f9;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .choice-input:checked + .choice-label {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.3);
    }
    
    .choice-input:checked + .choice-label .choice-check {
        opacity: 1;
        transform: scale(1);
    }
    
    .choice-text {
        font-weight: 500;
        color: #1e293b;
    }
    
    .choice-check {
        color: #3b82f6;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.2s ease;
    }
    
    /* 错误提示 */
    .alert-danger {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        border: 1px solid rgba(220, 53, 69, 0.2);
    }
</style>

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">